<template>
	<view class="userLayout pageBg" v-if="userinfo">
		<view class="" :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="userInfo">
			<view class="avatar">
				<image src="/static/img/xxmLogo.png" mode="aspectFill" ></image>
			</view>
			<view class="ip">
				{{userinfo.IP}}
			</view>
			<view class="address">
				来自于：{{userinfo.address.city||userinfo.address.province || userinfo.address.country}}
			</view>
		</view>
		
		
		<view class="section">
			<view class="list">
				
				 <view class="row" @click="dowted">
				 	<view class="left">
				 		<uni-icons type="download-filled" size="20" ></uni-icons>
						<view class="text">
							我的下载
						</view>
				 	</view>
					<view class="right">
						<view class="text">
							{{userinfo.downloadSize}}
						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				 </view>
				 
				 <view class="row" @click="pinf">
				 	<view class="left" >
				 		<uni-icons type="star-filled" size="20" ></uni-icons>
				 						<view class="text">
				 							我的评分
				 						</view>
				 	</view>
				 					<view class="right">
				 						<view class="text">
				 							{{userinfo.scoreSize}}
				 						</view>
				 						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				 					</view>
				 </view>
				 
				 
				 <view class="row">
				 	<view class="left">
				 		<uni-icons type="chatboxes-filled" size="20" ></uni-icons>
				 						<view class="text">
				 							联系客服
				 						</view>
				 	</view>
				 					<view class="right">
				 						<view class="text">
				 							
				 						</view>
				 						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				 					</view>
									<!-- #ifdef MP -->
									<button open-type="contact">联系客服</button>
									<!-- #endif -->
									<!-- #ifndef MP -->
									<button @click="cliclContact">拨打电话</button>
									<!-- #endif -->
									
				 </view>
				 
				 
			</view>
		</view>
		
		<view class="section">
			<view class="list">
				 <view class="row" v-for="item in itemt" key="item.id">
				 	<view class="left">
				 		<uni-icons :type="item.type" size="20"></uni-icons>
						<view class="text">
							{{item.text}}
						</view>
				 	</view>
					<view class="right">
						<view class="text">
							
						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						
					</view>
					
					
				 </view>
			</view>
		</view>
		<view class="section">
			
		</view>
	</view>
	
	<view class="loadingLayout" v-else>
		<uni-load-more status="loading" ></uni-load-more>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { getNavBarHeight } from '../../utils/system'
	import { apiUserInfo } from '../../api/api'
	
	const userinfo = ref(0)
	
	const itemt = ref([{key:"0",type:"notification-filled",text:"订阅更新"},
	{key:"1",type:"flag-filled",text:"常见问题"}])

	// const itemttr = ref([{key:"0",type:"download-filled",text:"我的下载"},
	// {key:"1",type:"star-filled",text:"我的评分"}
	// ])
	
	const cliclContact = ()=>{
		uni.makePhoneCall({
			phoneNumber:"114"
		})
	}
	
	const dowted = ()=>{
		uni.navigateTo({
			url:'/pages/classlist/classlist?name=我的下载&type=download'
		})
	}
	const pinf = ()=>{
		uni.navigateTo({
			url:'/pages/classlist/classlist?name=我的评分&type=score'
		})
	}
	
	const getUserInfo = (()=>{
		apiUserInfo().then(res=>{
			userinfo.value = res.data
			console.log(res.data);
		})
	})
	
	getUserInfo();
</script>

<style lang="scss" scoped>
.userLayout{
	.userInfo{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 50rpx 0;
		.avatar{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.ip{
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		.address{
			font-size: 28rpx;
			color: #aaa;
		}
	} 
	.section{
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgb(0, 0, 0,0.05);
		.list{
			.row{
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			position: relative;
			background: #eee;
			&:last-child{
				border-bottom: 0;
			}
			.left{
				display: flex;
				align-items: center;
				:deep(){
					.uni-icons{
					color: $brand-theme-color !important;
				}
				}
				.text{
					padding-left: 20rpx;
					color: #666;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.text{
					font-size: 28rpx;
					color: #aaa;
				}
			}
			button{
				position: absolute;
				top: 0;
				left: 0;
				height: 100rpx;
				width: 100%;
				opacity:0 ;
			}
			}
			
			
		}
	}
}
</style>
